import { Descriptions, Button } from "antd";
import DarkCard from "../../../../../../common/DarkCard";
import { CloseOutlined } from "@ant-design/icons";
import biaoge from "../../../Zhpg/Yxfx/YxfxXq/biaoge";
import { useEffect, useState } from "react";
import Api from "../../../../../../../utils/api";
export default function ZhXqList(props) {
    let { zhXqList, cztxl, jzzyxl } = props;
    //console.log('data',zhXqList)
    const data = JSON.parse(zhXqList?.xq)

    //const btzd = biaoge();
    const [data1, setData1] = useState()
    //console.log('cztxl jzzyxl', cztxl, jzzyxl)
    useEffect(() => {
        Api.getConfig().then(resp => {
            if (cztxl) {
                setData1(resp?.detailTemplate?.[`${cztxl}`])
            } else {
                setData1(resp?.detailTemplate?.[`${jzzyxl}`])
            }

            //console.log('data',resp?.detailTemplate?.[`${cztxl}`])
        })
    }, [cztxl, jzzyxl])
    return <>
        <DarkCard style={{
            position: 'absolute',
            right: '10px',
            width: '300px',
            top: '20px',
            bottom: '20px',
            pointerEvents: 'auto',
            borderRadius: 8,
        }} className="layout-v">
            <div style={{
                fontSize: 20,
                fontWeight: "bold",
                borderBottom: "1px solid #eee",
                paddingBottom: 12,
                marginBottom: 12
            }} className='layout-h center'>
                <div className='fill w0'>{zhXqList?.title}</div>
                <div>
                    <Button size="small" icon={<CloseOutlined />} style={{
                        // color: "#fff"
                        background: "#00000000"
                    }} onClick={e => {
                        props?.onClose?.()
                    }} />
                </div>

            </div>
            {data && <Descriptions column={1} bordered size="large" className="fill h0" style={{
                overflow: 'auto'
            }}>
                {//console.log("d123", data, zhXqList, cztxl, jzzyxl)
                }
                {
                    data1?.map((key, value) => {
                        if (cztxl) {

                            return (
                                <Descriptions.Item label={key.alias}>{data?.[`${key.name}`]}</Descriptions.Item>
                            )
                        } else {

                            return (
                                <Descriptions.Item label={key.alias}>{data?.[`${key.name}`]}</Descriptions.Item>
                            )

                        }

                    })
                }

            </Descriptions>}
        </DarkCard>
    </>
}